 
	var eve_years = [
		['ALL'],
        	['2010'],
		['2011'],
		['2012'],
		['2013'],
		['2014'],
		['2015']
    	];

	var eve_months = [
		['ALL'],
        	['Jan'], 
		['Feb'], 
		['Mar'], 
		['Apr'], 
		['May'], 
		['Jun'], 
		['Jul'], 
		['Aug'], 
		['Sep'], 
		['Oct'], 
		['Nov'], 
		['Dec']
    	];


	var eve_yearStore = Ext.create('Ext.data.ArrayStore', {
        	fields: [
           	{name: 'year'} 
	],
        data: eve_years
    	});
	
	var eve_monthStore = Ext.create('Ext.data.ArrayStore', {
        	fields: [
           	{name: 'month'} 
	],
        data: eve_months
    	});

	var eve_appStore = Ext.create('Ext.data.JsonStore',{
    		autoDestroy: true,
    		proxy: {
	  		type: 'ajax',
        		url: 'data.php',
        		reader: {
    				type: 'json',
    				root: 'data'
        			}
    			},
    		fields: ['value','label']
	});

	var eve_fieldStore = Ext.create('Ext.data.JsonStore',{
    		autoDestroy: true,
    		proxy: {
	  		type: 'ajax',
        		url: 'data.php',
        		reader: {
    				type: 'json',
    				root: 'data'
        			}
    			},
    		fields: ['value','label']
	});

	Ext.define('eve_chart_model',{
		extend: 'Ext.data.Model',
		fields: ['name','occ' ]
	}); 
	
	var eve_chartStore = Ext.create('Ext.data.Store', {
		model: 'eve_chart_model',
		autoLoad: true,
		autoSync:true,
		proxy: {
			type: 'ajax',
			url: 'pie_chart_xml.php',
			reader: {
				type: 'xml',
				record: 'value',
			}
		}
	});

	var eve_yearCmb = Ext.create('Ext.form.ComboBox',{ 
		store: eve_yearStore,
		valueField: 'year',
		labelStyle:'padding-left:0px', 
		labelWidth: 65,
		displayField: 'year',
		triggerAction: 'all',
		mode: 'local',
		emptyText: 'Select a year',
		fieldLabel: 'Year'
	});

	var eve_monthCmb = Ext.create('Ext.form.ComboBox',{ 
		store: eve_monthStore,
		valueField: 'month',
		labelStyle:'padding-left:10px', 
		labelWidth: 65,
		displayField: 'month',
		triggerAction: 'all',
		mode: 'local',
		emptyText: 'Select a month',
		fieldLabel: 'Month'
	});
		
	var eve_appCmb = Ext.create('Ext.form.ComboBox',{
		store: eve_appStore,
		id: 'app',
		valueField: 'value',
		labelStyle:'padding-left:0px', 
		labelWidth: 65,
		displayField: 'label',
		triggerAction: 'all',
		emptyText: 'Select an application',
		fieldLabel: 'Application',
		listeners:{
 			'select': function( ) {
				eve_fieldCmb.enable();
				eve_fieldCmb.clearValue();
				//alert ( appCmb.getValue( ) );
				//fieldStore.load({params:{id: appCmb.getValue()}});
				eve_fieldStore.proxy.url = 'data.php?id='+eve_appCmb.getValue();
				eve_fieldStore.load();
			}
		}
	 });

	var eve_fieldCmb = Ext.create('Ext.form.ComboBox',{ 
		store: eve_fieldStore,
		disabled: true,
		id: 'eve_field',
		valueField: 'value',
		labelStyle:'padding-left:10px', 
		labelWidth: 65,
		displayField: 'label',
		triggerAction: 'all',
		mode: 'local',
		emptyText: 'Select an application first',
		fieldLabel: 'Field'
	});
                 
	var eve_details = Ext.create('Ext.form.Panel', {
		height : 130,
		width   : 480,
	 	border: false,
	 	defaults: {
  	 		border: false
	 	},
		items:[{
			xtype: 'fieldset',
			height: 100,
			title: 'Pie chart Details',
			collapsible: true,
			defaults: {
				labelWidth: 80,
				anchor: '100%',
				layout: {
		        		type: 'hbox',
		        		defaultMargins: {top: 0, right: 3, bottom: 0, left: 0}
	 			}
			},
			items: [
			{
				xtype: 'fieldcontainer',
				combineErrors: false,
				items: [eve_yearCmb, eve_monthCmb]
			},{
				xtype: 'fieldcontainer',
				combineErrors: false,
				items: [eve_appCmb, eve_fieldCmb]					
			}]
		}],
		buttons: [
    		{ 
        		text   : 'Submit',
        		handler: function() {
				eve_chartStore.proxy.url = 'pie_chart_xml.php?app='+eve_appCmb.getRawValue( )+'&year='+eve_yearCmb.getRawValue( )+'&month='+eve_monthCmb.getRawValue( )+'&field='+eve_fieldCmb.getRawValue( )+'&correlator=off';
				eve_chartStore.load();

        		}
    		}]
	});

	var pie_chart = Ext.create('Ext.chart.Chart',{
		height : 500,
		width   : 500,
		animate: true,
		store: eve_chartStore,
		shadow: true,
		legend: {
			position: 'right'
		},
		insetPadding: 25,
		theme: 'Base:gradients',
		series: [{
			type: 'pie',
			field: 'occ',
			showInLegend: true, 
			tips: {
				trackMouse: true,
				width: 140,
				height: 28,
				renderer: function(storeItem, item) {
					var total = 0;
					eve_chartStore.each(function(rec) {
						total = total + parseInt(rec.get('occ')) ;
					});
				this.setTitle(storeItem.get('name') + ': ' + Math.round(storeItem.get('occ') / total * 100) + '%');
				}
			},
		highlight: {
			segment: {
				margin: 20
			}
		},
		label: {
			field: 'name',
			display: 'rotate',
			contrast: true,
			font: '14px Arial'
		}
		}]	
	});
	
	var eve_chart = Ext.create('widget.panel', {
	        autoHeight: true,
		width   : 503,
	 	border: false,
	 	defaults: {
  	 		border: false
	 	},
		bodyPadding: 10,
		height: 650,
		//renderTo: Ext.getBody(),
                layout: 'fit',
		items: {
			xtype: 'container',  
	                layout: 'vbox',
	        	items: [ eve_details , pie_chart ]
		}
			 
	});

 
